<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		#box{
			width: 100px;
			height: 100px;
			background: #f00;
			position: absolute;
			left: 0;
			top: 100px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script>
		// function move( obj,attr,target,duration,callback ){
		// 	var b = parseInt(getComputedStyle(obj)[attr]);
		// 	var c = target - b; 
		// 	var d = duration;
		// 	var temp = new Date().getTime();
		// 	var timer = setInterval( function(){
		// 		var t = new Date().getTime()-temp;
		// 		if( t >= d ){
		// 			clearInterval( timer );
		// 			t = d;
		// 		}
		// 		var v = c/d*t+b ;
		// 		obj.style[attr] = v + "px";
		// 		if( t === d ){
		// 			typeof callback === "function" && callback();
		// 		}
		// 	},20 )
		// }
		var box = document.getElementById( 'box' );
		// move( box,"width",200,500,()=>{
		// 	move( box,"height",300,500,()=>{
		// 		move( box,"left",300,500,()=>{
		// 			move( box,"top",200,500)
		// 		})
		// 	})
		// } )
		
		function movePromise( obj,attr,target,duration ){
			return new Promise( (res,rej)=>{
				var b = parseInt(getComputedStyle(obj)[attr]);
				var c = target - b; 
				var d = duration;
				var temp = new Date().getTime();
				var timer = setInterval( function(){
					var t = new Date().getTime()-temp;
					if( t >= d ){
						clearInterval( timer );
						t = d;
					}
					var v = c/d*t+b ;
					obj.style[attr] = v + "px";
					if( t === d ){
						res()
					}
				},20 )
			} )
		}
		movePromise( box,"width",200,500 )
		.then( ()=>movePromise( box,"height",300,1000 ) )
		.then( ()=>movePromise( box,"left",300,1000 ) )
		.then( ()=>movePromise( box,"top",200,1000 ) )
		.then( ()=>console.log( "done" ) )
	</script>
</body>
</html>